<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>艺术绘图工具</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            background-color: #fff;
        }

        canvas {
            position: relative;
            border: 25px solid #f9f9f9; /* 木质颜色边框 */
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), 
                        0 0 50px rgba(0, 0, 0, 0.15) inset,
                        0 0 15px rgba(255, 255, 255, 0.6) inset;
            background-color: #fff8f0; /* 浅米色画布背景 */
        }

        canvas::before {
            content: '';
            position: absolute;
            top: -25px;
            left: -25px;
            right: -25px;
            bottom: -25px;
            background: 
                linear-gradient(45deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.15) 100%),
                radial-gradient(circle at 15% 15%, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 35%);
            z-index: 1;
        }

        canvas::after {
            content: '';
            position: absolute;
            top: -25px;
            left: -25px;
            right: -25px;
            bottom: -25px;
            background-color: rgba(0, 0, 0, 0.03);
            z-index: 1;
        }

        #downloadButton {
            position: fixed;
            top: 50%;
            right: 20px;
            transform: translateY(-50%);
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 5px;
            padding: 10px 20px;
            cursor: pointer;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            transition: background 0.3s ease;
        }

        #downloadButton:hover {
            background: linear-gradient(135deg, #5a6fc5 0%, #6b4293 100%);
        }
    </style>
</head>

<body>
    <canvas id="paintCanvas" width="800" height="600"></canvas>
    <button id="downloadButton">绘画下载</button>

    <script>
        const canvas = document.getElementById('paintCanvas');
        const ctx = canvas.getContext('2d');
        const downloadButton = document.getElementById('downloadButton');

        // 预设的配色方案
        const colorPalettes = [
            ['#F5EBFF', '#D0BFFF', '#AE94FF', '#8661FF', '#6633FF'],
            ['#FFEBEB', '#FFC2C2', '#FF9999', '#FF6666', '#FF3333'],
            ['#E5F6FF', '#B3D9FF', '#80BFFF', '#4DA6FF', '#1A8CFF'],
            ['#F6FFF3', '#DFFFD1', '#C8FFA9', '#B1FF81', '#9AFF59']
        ];

        // 从预设配色方案中获取随机颜色
        function getRandomPaletteColor() {
            const randomPalette = colorPalettes[Math.floor(Math.random() * colorPalettes.length)];
            return randomPalette[Math.floor(Math.random() * randomPalette.length)];
        }

        // 绘制有力度和质感的随机曲线
        function drawRandomCurve() {
            const startX = Math.random() * (canvas.width - 50) + 25;
            const startY = Math.random() * (canvas.height - 50) + 25;
            const controlX1 = Math.random() * (canvas.width - 50) + 25;
            const controlY1 = Math.random() * (canvas.height - 50) + 25;
            const controlX2 = Math.random() * (canvas.width - 50) + 25;
            const controlY2 = Math.random() * (canvas.height - 50) + 25;
            const endX = Math.random() * (canvas.width - 50) + 25;
            const endY = Math.random() * (canvas.height - 50) + 25;

            ctx.beginPath();
            ctx.moveTo(startX, startY);
            ctx.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);
            ctx.strokeStyle = getRandomPaletteColor();
            ctx.lineWidth = Math.random() * 8 + 2;
            ctx.lineCap = 'round';
            ctx.stroke();
        }

        // 绘制复杂的线条组合，增加线条的动态感和韵律
        function drawComplexLines() {
            const centerX = Math.random() * (canvas.width - 100) + 50;
            const centerY = Math.random() * (canvas.height - 100) + 50;
            const numLines = Math.floor(Math.random() * 12) + 6;
            const maxLength = Math.min(canvas.width, canvas.height) / 3;
            const angleStep = (2 * Math.PI) / numLines;

            for (let i = 0; i < numLines; i++) {
                const angle = angleStep * i + Math.random() * 0.5;
                const length = Math.random() * maxLength;
                const startX = centerX + length * Math.cos(angle);
                const startY = centerY + length * Math.sin(angle);
                const waveOffset = Math.random() * 20;
                const endX = centerX + (length + Math.random() * 80) * Math.cos(angle + Math.random() * 0.3 - 0.15);
                const endY = centerY + (length + Math.random() * 80) * Math.sin(angle + Math.random() * 0.3 - 0.15);

                ctx.beginPath();
                ctx.moveTo(startX, startY);
                for (let t = 0; t <= 1; t += 0.05) {
                    const x = startX + t * (endX - startX);
                    const y = startY + t * (endY - startY) + Math.sin(t * Math.PI * 5) * waveOffset;
                    ctx.lineTo(x, y);
                }
                ctx.strokeStyle = getRandomPaletteColor();
                ctx.lineWidth = Math.random() * 5 + 1;
                ctx.lineCap = 'round';
                ctx.stroke();
            }
        }

        // 绘制线条组，形成有节奏的图案
        function drawLineGroup() {
            const startX = Math.random() * (canvas.width - 200) + 100;
            const startY = Math.random() * (canvas.height - 200) + 100;
            const numLines = Math.floor(Math.random() * 8) + 4;
            const lineSpacing = 10;
            const lineLength = Math.random() * 100 + 50;
            const angle = Math.random() * Math.PI * 2;

            for (let i = 0; i < numLines; i++) {
                const offsetX = i * lineSpacing * Math.cos(angle + Math.PI / 2);
                const offsetY = i * lineSpacing * Math.sin(angle + Math.PI / 2);
                const lineStartX = startX + offsetX;
                const lineStartY = startY + offsetY;
                const lineEndX = lineStartX + lineLength * Math.cos(angle);
                const lineEndY = lineStartY + lineLength * Math.sin(angle);

                ctx.beginPath();
                ctx.moveTo(lineStartX, lineStartY);
                ctx.lineTo(lineEndX, lineEndY);
                ctx.strokeStyle = getRandomPaletteColor();
                ctx.lineWidth = Math.random() * 3 + 1;
                ctx.lineCap = 'round';
                ctx.stroke();
            }
        }

        // 生成绘画，注重构图布局的虚实与节奏
        function generatePainting() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            const numElements = Math.floor(Math.random() * 15) + 10;

            // 控制疏密节奏，先绘制一些大线条组合，再绘制一些小线条
            const largeShapes = Math.floor(numElements * 0.4);
            const smallShapes = numElements - largeShapes;

            for (let i = 0; i < largeShapes; i++) {
                const randomChoice = Math.random();
                if (randomChoice < 0.3) {
                    drawRandomCurve();
                } else if (randomChoice < 0.6) {
                    drawComplexLines();
                } else {
                    drawLineGroup();
                }
            }

            // 小线条增加画面的虚实感
            for (let i = 0; i < smallShapes; i++) {
                if (Math.random() < 0.7) {
                    ctx.globalAlpha = 0.3; 
                    drawRandomCurve();
                    ctx.globalAlpha = 1;
                } else if (Math.random() < 0.85) {
                    ctx.globalAlpha = 0.3;
                    drawComplexLines();
                    ctx.globalAlpha = 1;
                } else {
                    ctx.globalAlpha = 0.3;
                    drawLineGroup();
                    ctx.globalAlpha = 1;
                }
            }
        }

        // 下载图片
        function downloadCanvasImage() {
            generatePainting();
            const link = document.createElement('a');
            link.href = canvas.toDataURL('image/png');
            link.download = 'generated_painting.png';
            link.click();
        }

        downloadButton.addEventListener('click', downloadCanvasImage);
        generatePainting();
    </script>
</body>
</html>